*{
    margin:0;
    padding:0;
    font-family: "Microsoft Yahei";
}
html,body{
    width:100%;
    height:100%;
}
body{
    max-width:600px;
    margin:0 auto;
}
.page{
    width:100%;
    height:100%;
    position:relative;
}
.waterfall{
    .loading{
        display: none;
        width:60px;
        position:fixed;
        bottom:10px;
        left:50%;
        margin-left:-30px;
        font-size: 10px;
        margin-left: -30px;
        background: rgba(0,0,0,.3);
        color: white;
        text-align: center;
    }
    header{
        background:#ff7fa4;
        text-align:center;
        color:white;
        height: 40px;
        line-height: 40px;
        font-size:.9rem;
    }
    nav{
        height:40px;
        font-size:.7rem;
        border-bottom:1px solid lightgray;
        a{
            &.active{
                color:#ff7fa4;
                font-size:.8rem;
            }
            cursor: pointer;
            color:gray;
            text-align:center;
            line-height:40px;
            display:inline-block;
            width:25%;
            float:left;
        }
    }
    .imglist{
        position:relative;
        list-style:none;
        margin:.25rem;
        li{
            position:absolute;
            img{
                width:100%; 
            }
            span{
                position:absolute;
                bottom:0;
                right:0;
                display: block;
                width:20px;
                height:20px;
                color:#fff;
                background-color:rgba(63,63,63,.7);
                text-align:center;
                line-height:20px;
                font-size:.6rem;
            }
        }
    }
}

.imgdetail{
    header{
        position:absolute;
        top:0;
        left:0;
        height:40px;
        background-size: 11px 20px;
        z-index: 2;
        width:100%;
        background: rgba(0,0,0,.5);
        span{
            position:absolute;
            left:7%;
            top:0;
            z-index: 1;
            display: block;
            text-align: center;
            line-height: 40px;
            color:white;
            font-size:.7rem;
            width:86%;
            overflow:hidden;
        }
        a{
            position:absolute;
            left:0;
            top:0;
            z-index: 2;
            color:#fff;
            display: block;
            width:100px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            background:url() no-repeat 21.2% 8px;
            background-size: 11px 20px;
        }
    }
    .swiper-container,swiper-wrapper,swiper-slide {
        width: 100%;
        height: 100%;
        background: #000;
    }
    .swiper-slide {
        width:100%;
        text-align: center;
        font-size: 18px;
        background: #000;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        img{
            width:100%;
        }
    }

    .swiper-pagination{
        bottom:0px;
        height:40px;
        line-height: 40px;
        color:#fff;
        background:rgba(0,0,0,.5);
    }
    #origin_url{
        position: fixed;
        bottom: 12px;
        left: 10px;
        border: 1px solid white;
        text-align: center;
        height: 20px;
        line-height: 20px;
        color: white;
        z-index: 11;
        font-size: 12px;
        width: 60px;
    }
}
